/**
 * bootstrap-dropDownPanel
 * 此为定制的bootstrap的下拉框插件，以customize.js为前置
 */

var dropDownPanelFns={
    createInitOption:function(){
        var option = {
            showPanelFn:null
            ,hidePanelFn:null
        };
        return option;
    }
    ,init:function(option){
        var dropPanel = createDropPanel($(this).css("width"),$(this).offset().left,$(this).offset().top+parseInt($(this).css("height")));
        bindShowHide($(this),dropPanel,option.showPanelFn,option.hidePanelFn);
        $('body').append(dropPanel);
        $(this).data('dropPanel',dropPanel);
        $(this).data('dropDownOption',option);
    }
    ,getOption:function(){
        return $(this).data('dropDownOption');
    }
    ,getPanel:function(){
        return $(this).data('dropPanel');
    }
    ,hidePanel:function(){
        hide($(this).data('dropPanel'),$(this).data('dropDownOption').hidePanelFn);
    }
    ,showPanel:function(){
        show($(this).data('dropPanel'),$(this).data('dropDownOption').showPanelFn);
    }
    ,panelLoading:function (status) {
        var panel = $(this).data('dropPanel');
        switch(status){
            case 'loading':
                panel.empty();
                panel.addClass('dropDownPanel-loading');
                break;
            case 'stop':
                panel.removeClass('dropDownPanel-loading');
        }
    }
    ,setPanelUl:function(param){
        var array = param.array;
        var liClick = param.onClick;
        var panel = $(this).data('dropPanel');
        var ul = $('<div class="list-group"></div>');
        array.forEach(function(item,index,arr){
            var text = item.text;
            var li = $('<a href="#" class="list-group-item">'+text+'</a>');
            if(typeof liClick == "function"){
                li.bind('click',function(){
                    liClick(item,index,arr);
                });
            }
            ul.append(li);
        });
        panel.empty();
        panel.append(ul);
    }
};

$.fn.extend({
    dropDownPanel:function(fnName,fnParam){
        if(!CommonUtils.isBlank(fnName)){
            return dropDownPanelFns[fnName].apply(this,[fnParam]);
        }
    }
    ,hasParent:function(targetJq){
        var parents = $(this).parents();
        if(parents && parents.length){
            for(var i = 0; i< parents.length;i++){
                if($(parents[i]).is(targetJq)){
                    return true;
                }
            }
        }
        return false;
    }
});

function bindShowHide(jq,dropPanelJq,showFn,hideFn){
    jq.click(function(){
        if(dropPanelJq.data("dropExpend")){
            hide(dropPanelJq,hideFn);
        }else{
            show(dropPanelJq,showFn);
        }
    });
    jq.find("a").click(function(){
        hide(dropPanelJq);
    });
    $(document).click(function(e){
        if(e.target){
            if($(e.target).is(dropPanelJq) ||  $(e.target).hasParent(dropPanelJq)
                || $(e.target).is(jq) ||  $(e.target).hasParent(jq)
            ){
                return;
            }else{
                hide(dropPanelJq,hideFn);
            }
        }
    });
}

function show(targetJq,call){
    if(targetJq.data("dropExpend")){
        return;
    }
    targetJq.css("display","block");
    targetJq.data("dropExpend",true);
    if(typeof call == 'function'){
        call(targetJq);
    }
}
function hide(targetJq,call){
    if(!targetJq.data("dropExpend")){
        return;
    }
    targetJq.css("display","none");
    targetJq.data("dropExpend",false);
    if(typeof call == 'function'){
        call(targetJq);
    }
}

function createDropPanel(width,left,top){
    console.info("createDropPanel");
    var dropPanel = $('<div class="panel panel-default dropDownPanel"></div>');
    dropPanel.css({
        'width':width
        ,'top':top
        ,'left':left
    });
    return dropPanel;
}